<template>
    <div class="search-box">
        <a-button class="add-news" @click="addNew">
            添加新闻
            <template #icon>
                <PlusOutlined />
            </template>
        </a-button>
        <a-form layout="inline" class="form-line" :model="formData" @finish="searchList">
            <a-form-item label="标题" name="title">
                <a-input placeholder="" v-model:value="formData.title" />
                
            </a-form-item>
            <a-form-item label="分类" name="catid">
                <a-select v-model:value="formData.catid">
                    <a-select-option v-for="(item,key) in siteState['catList']" :key="key" :value="item['catid']">{{item['catname']}}</a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" :disabled="siteState['btnStatus']" html-type="submit">搜索文章</a-button>
            </a-form-item>
        </a-form>
    </div>
    <a-table rowKey="id"  :dataSource="siteState['dataList']" :pagination="pagination" :columns="columns" >
        <template #selectId="{record}">
            <a-checkbox v-model:checked="record['selected']" :value="record['id']"></a-checkbox>
            {{record.id}}
        </template>
        <template #action="{record}">
            <a-button shape="circle" type="primary" @click="editNew(record['id'])" size="small">
                <template #icon>
                    <FormOutlined />
                </template>
            </a-button>
            <a-button shape="circle" class="left15" danger @click="newsDelete(record['id'])"  size="small">
                <template #icon>
                    <DeleteOutlined />
                </template>
            </a-button>
        </template>
    </a-table>
    <div class="pilian">
        <a-button @click="newsDelete()" danger>批量删除</a-button>
    </div>
    <a-drawer v-model:visible="siteState['openDrawer']" width="750" :title="siteState['title']">
        <router-view v-if="siteState['openDrawer']" @resetNews="initNewsList"></router-view>
    </a-drawer>
</template>
<style lang="less" scoped>
.search-box{
    margin-bottom: 5px;

    .form-line{
        width:650px;
    }

    .add-news{
        float:right;
    }
}

.pilian{
    margin-top: 8px; text-align: left; clear: both;
}
</style>
<script setup>
import { reactive, toRaw } from "@vue/reactivity";
import {FormOutlined,DeleteOutlined,PlusOutlined} from '@ant-design/icons-vue';
import { newsCatList, newsList,newsDel } from "@/api/content";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";


message.config({duration:1.2,top:'200px'});
const columns=[
    {
        title:'选项',
        dataIndex:'id',
        key:'id',
        align:'center',
        slots:{customRender:"selectId"},
        width:'80px'
    },
    
    {
        title:'新闻标题',
        dataIndex:'title',
        key:'title',
        align:'center',
        slots:{}
    },
    {
        title:'所属栏目',
        dataIndex:'catname',
        key:'catname',
        align:'center',
    },
    {
        title:'发布日期',
        dataIndex:'rq',
        key:'rq',
        align:'center',
    },
    {
        title:'',
        dataIndex:'',
        key:'',
        align:'center',
    },
    {
        title:'排序',
        dataIndex:'listorder',
        key:'listorder',
        align:'center',
        slots:{customRender:"listorder"}
    },
    {
        title:'操作',
        dataIndex:'action',
        key:'action',
        align:'center',
        slots:{customRender:'action'}
    }
];
const siteState=reactive({btnStatus:false,openDrawer:false,title:'添加新闻',dataList:[],catList:[{catid:0,catname:'不限'}]});//状态

const formData=reactive({
    title:'',
    catid:0
});//表单数据

const pagination=reactive({
    defaultPageSize:15,
    total:0,
    page:1,
    showSizeChange:(current,size)=>{
        pagination.defaultPageSize=size;
        pagination.page=1;
        initNewsList();
    },
    onChange:(current,size)=>{
        pagination.page=current;
        initNewsList();
    },
});//分页控件

const router=useRouter();


const initNewsList = ()=>{
    siteState['btnStatus']=true;
    siteState['openDrawer']=false;
    let obj=toRaw(formData);
    newsList({...obj,page:pagination.page,pageSize:pagination.defaultPageSize}).then(
        res=>{
            
            siteState['btnStatus']=false;
            if(res.data['code']==200)
            {
                pagination.total=res.data['data']['total'];
                let newsList=res.data['data']['dataList'];
                newsList.forEach((item,index) =>{
                    newsList[index]['selected']=false;
                });
               
                siteState['dataList']=newsList;
            }
            else{
                message.error(res.data['msg']);
            }
                
                    
        },
        err=>{
            console.log(err);
            siteState['btnStatus']=false;
        }
    )


};//获取文章

const searchList = () =>{
    pagination.page=1;
    pagination.total=0;
    initNewsList();
};//搜索


const addNew= () =>{
    siteState.openDrawer=true;
    router.push({name:'NewsAdd'});
    siteState.title='添加文章';
};

const editNew = (id) =>{
    siteState.openDrawer=true;
    router.push({name:'NewsEdit',params:{id:id}});
    siteState.title='修改文章';
}


const newsDelete= (id=0) =>{
    let ids=[];
    if(id)
    {
        ids.push(id);
    }
    else{
        //批量删除
        siteState['dataList'].forEach((item,index) =>{
            if(item['selected'])
            {
                ids.push(item['id']);
            }
        });
    }

    if(ids.length){
        newsDel({ids:ids}).then(
            res=>{
                
                if(res.data['code']==200)
                {
                    message.success('删除成功');
                    pagination.page=1;
                    initNewsList();
                }
                else{
                    message.error(res.data['msg']);
                }
            },
            err=>{
                console.log(err);
            }
        )
    }


}//--删除文章

newsCatList().then(
    res=>{
        
        siteState.catList=res.data.data;
    },
    err=>{
        console.log(res.err);
    }
)

initNewsList();
</script>
